<script setup>
import SmallExpertInfoCard from "@/components/card/SmallExpertInfoCard.vue";
import {ref,onMounted} from "vue";
import SmallQACard from "@/components/card/SmallQACard.vue";
import SmallArticleCard from "@/components/card/SmallArticleCard.vue";
import {getExpertsAPI} from "@/apis/home.js";
import router from '@/router/index.js'
import {ArrowRight} from "@element-plus/icons-vue";

const experts=ref([])

//获取专家数据
const getExperts=async()=> {
  const res= await getExpertsAPI()
  experts.value=res.data
}
//组件完成初始渲染时发送请求
onMounted(() => {
  getExperts()
})

</script>

<template>
<el-card class="LearningCard">
  <el-row>
    <el-col :span="24">
      <h2>农技学堂</h2>
    </el-col>
  </el-row>
  <el-row :gutter="30">
    <el-col :span="8">
      <div class="header">
        <div class="title">热门专家</div>
        <div class="more">
          <el-link :underline="false" style="font-size: 12px;">
            更多<el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
      </div>
      <div class="content">
        <SmallExpertInfoCard :experts="experts"></SmallExpertInfoCard>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="header">
        <div class="title">专家回答</div>
        <div class="more">
          <el-link :underline="false" style="font-size: 12px;" @click="router.push(`/expert/questionPage`)">
            更多<el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
      </div>
      <div class="content">
       <SmallQACard></SmallQACard>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="header">
        <div class="title">推荐文章</div>
        <div class="more">
          <el-link :underline="false" style="font-size: 12px;">
            更多<el-icon><ArrowRight /></el-icon>
          </el-link>
        </div>
      </div>
      <div class="content">
        <SmallArticleCard></SmallArticleCard>
      </div>
    </el-col>
  </el-row>
</el-card>
</template>

<style scoped lang="less">
.LearningCard{
  width: auto;
  height: auto;
  background-color: white;
  margin-bottom: 20px;
  padding: 20px;
}

.header{
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title{
  font-size: 16px;
  color: #444;
  letter-spacing: 0;
  padding-left: 8px;
  border-left: 4px solid #39bf3e;
}

.more{
  float:right;
}

.content {
  min-height: 300px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background-color: #fafafa;
}

.el-row {
  margin-bottom: 0;
}

.el-col {
  padding: 0 10px;
}

.el-col:first-child {
  padding-left: 0;
}

.el-col:last-child {
  padding-right: 0;
}
</style>